<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>血液价格</title>
    <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="/element-theme/blue/index.css">
    <script src="/js/echarts.js"></script>
    <script src="/js/axios.min.js"></script>
</head>

<body>
<div class="data-manage-table">
    <template>
        <el-form ref="form" :inline="true"  style="padding:20px 20px 0 20px;">
            <!-- <el-button type="primary" style="margin-right: 40px;">批量删除</el-button> -->
            <el-form-item label ="血液价格表">
            </el-form-item>

            <el-form-item>

                <el-button type="primary" @click="load">刷新</el-button>
                <el-button  @click="dialogVisible = true">导出</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="tableData" style="width: 100%" border
                  :header-cell-style="{'text-align': 'center','background': '#eef1f6'}" highlight-current-row
                  @current-change="">
            <el-table-column type="selection" width="55" align="center"></el-table-column>

            <el-table-column prop="id" label="血液种类id" min-width="10%" align="center">
            </el-table-column>

            <el-table-column prop="priceExecutionNumber" label="价格执行文号" min-width="15%" align="center">
            </el-table-column>

            <el-table-column prop="priceExecutionDate" label="价格执行时间" min-width="20%" align="center">
            </el-table-column>

            <el-table-column prop="bloodType" label="血液类型" min-width="15%" align="center">
                <template slot-scope="scope">
                    {{getStateVarity(scope.row.bloodType)}}<!--调用getChangeType方法-->
                </template>
            </el-table-column>

            <el-table-column prop="bloodPrice" label="血液价格" min-width="15%" align="center">
            </el-table-column>

            <el-table-column prop="measurementUnit" label="血液单位" min-width="15%" align="center">
            </el-table-column>
        </el-table>

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="current"
                :page-sizes="[1, 5, 10, 20]"
                :page-size.sync="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                class="pagination"
                style="text-align: center; margin-top: 20px;">
        </el-pagination>
    </template>
</div>

<script src="/plugins/vue-2.6.11/vue.js"></script>
<script src="/plugins/element-2.4.5/index.js"></script>
<script src="/icons/iconfont.js"></script>
<script>Vue.prototype.$ELEMENT = { size: 'medium' };</script>
<script>
    (function () {
        var vm = window.vm = new Vue({
            el: '.data-manage-table',
            data() {
                return {
                    stateListVarity:{},//数据字典
                    total: 0,   //总记录数
                    current: 1,     //当前页
                    pageSize: 5,      //每页记录数
                    pages: 0,       //总页数
                    tableData: [
                        {
                            id:'',
                            priceExecutionNumber:'',
                            priceExecutionDate:'',
                            bloodType:'',
                            bloodPrice:'',
                            measurementUnit:''
                        }

                    ],

                    //新增样本表单验证
                }
            },
            methods: {
                //数据字典
                getVarityState(){
                    fetch(`/bloodComposition/normal/getName`).then(res => res.json()).then(res => {
                        console.log("1"+res.code)
                        if (res.code == 200){
                            this.stateListVarity = res.data
                        } else {
                            this.$notify.error({
                                title : '错误',
                                message : '获取数据失败'
                            })
                        }
                    })
                },
                getStateVarity(code){
                    for (var i=0;i<this.stateListVarity.length;i++){
                        if (this.stateListVarity[i].code == code){
                            return this.stateListVarity[i].composition
                        }
                    }
                },
                handleSizeChange(val) {
                    this.current = 1
                    this.pageSize = val
                    this.load()
                },

                //点击页码
                handleCurrentChange: function (val) {
                    this.load()
                },
                load() {
                    axios({
                        url: '/bloodPrice/normal/searchPrice',
                        method: 'get',
                        params: {
                            currentPage: this.current,
                            pageSize: this.pageSize
                        },
                    }).then(res => {
                        if (res.status == '200') {
                            //个每个商品添加amount字段，初始值为1
                            res.data.data.forEach((value , index) => {
                                value.amount = 1
                            })
                            this.tableData = res.data.data
                            this.total = res.data.total;
                            this.pages = res.data.pages;
                        } else {
                            this.$notify({
                                tile: '警告',
                                message: '搜索出错',
                                type: 'warning'
                            })
                        }
                    }).catch(err => {
                        this.$notify.error({
                            title: '错误',
                            message: '搜索失败',
                        })
                    })
                }
            },
            mounted() {
                this.getVarityState()
                this.load()

            }

        });
    })()
</script>

</body>

</html>